<!-- 新增教师 -->
<template>
  <div class="xzjs">
    <cpn>
      <h1>新增教师</h1>
    </cpn>
    <div class="lbtBtn">
      <router-link to="/Star" tag="div" class="lbtbtn">
        <div role="button">
          <img src="../assets/xzlbt-fh-btn.png" alt />
          <span>返回</span>
        </div>
      </router-link>
    </div>
    <div class="js-content">
      <div class="describe">
        <p>
          <span>请填写教师信息</span>
        </p>
      </div>
      <!-- 教师姓名 -->
      <div class="js-name">
         <span>
           教师姓名
           <b>*</b> :
         </span>
         <el-input placeholder="请输入教师姓名" v-model="input" clearable></el-input>
         <p>教师姓名不能为空</p>
      </div>
      <!-- 教师头像 -->
      <div class="js-img">
          <span style="position:relative;top=16px">
             教师头像
             <b>*</b> :
          </span>
        <span class="sctp">上传头像</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
        <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
          <p>建议尺寸为70*70像素,大小小于2M</p>
      </div>
      <!-- 教师简介 -->
      <div class="js-jj">
          <span>
             简介
             <b>*</b> :
          </span>
          <el-input v-model="input2" clearable></el-input>
      </div>
      <!-- 内容详情 -->
      <div class="js-xq">
          <p class="title">内容详情：</p>
            <div class="edit">
            <el-row>
              <quill-editor v-model="content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
             </quill-editor>
            </el-row>
            </div>
      </div>
      <!--上传时间-->
      <div class="js-time">
        <span style="  position: relative;
  top: 10px;">
          上传时间 :
        </span>
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
      <!--排序-->
      <div class="js-pxh">
        <span style="  position: relative;
  top: 10px;">排序号:</span>
        <el-input placeholder="0" v-model="input3" clearable></el-input>
        <p style="  position: relative;
  top: 10px;left:10px;">请填写数字，数字越大越靠前</p>
      </div>
      <div class="js-bottom-btn">
          <div class="js-bottom-btn-son" @click="clickJump1()">
            <div role="button" class="baocun">
            <img src="../assets/xzlbt-btn1.png" alt="">
            <span>保存</span>
          </div>
          <div role="button" class="quxiao" @click="clickJump2()">
            <img src="../assets/xzlbt-btn2.png" alt="">
            <span>取消</span>
          </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import cpn from "../components/biaoti.vue"
import {quillEditor} from 'vue-quill-editor'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    cpn,
    quillEditor
  },
  data() {
    //这里存放数据
    return {
      input: "",
      input2: "",
      input3:"",
      value: true,
      dialogImageUrl: "",
      dialogVisible: false,
      /*富文本开始*/
      content:'',
      editorOption:{},
      /*富文本结束*/
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
    };
  },
  methods: {
    /*富文本方法开始*/
    // eslint-disable-next-line no-unused-vars
    onEditorBlur(editor){//失去焦点事件 
  },
   // eslint-disable-next-line no-unused-vars
   onEditorFocus(editor){//获得焦点事件
   },
   // eslint-disable-next-line no-unused-vars
   onEditorChange({editor,html,text}){//编辑器文本发生变化
    //this.content可以实时获取到当前编辑器内的文本内容
    console.log(this.content);
   },
    /*结束*/
     handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    open: function () {
      this.$message({
        message: "保存成功！",
        type: "success",
        center: true,
      });
    },

    //进入跳转页面
    clickJump1() {
      this.$message({
        message: "保存成功！",
        type: "success",
        center: true,
      });
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/Star" });
          }
        }, 600);
      }
    },

    clickJump2() {
      const timejump = 1;
      if (!this.timer) {
        this.count = timejump;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= timejump) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({ path: "/Star" });
          }
        }, 100);
      }
    },
  },
};
</script>
<style>
/* 返回按钮开始 */
.xzjs {
  position: relative;
  margin-left: 30px;
}
.lbtBtn {
  position: absolute;
  right: 50px;
  top: 20px;
}
.lbtbtn {
  position: relative;
  width: 80px;
  height: 34px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(145, 55, 243, 1);
  border-radius: 4px;
  box-shadow: none;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  color: #9137f3;
  cursor: pointer;
}
.lbtbtn img {
  position: absolute;
  top: 9px;
  left: 18px;
}
.lbtbtn span {
  position: absolute;
  top: 7px;
  right: 10px;
}
/* 返回按钮结束 */
/* 内容部分开始 */
.js-content {
  width: 1100px;
  height: 1100px;
  border: 1px solid rgb(228, 228, 228);
  margin: 0 auto;
}
/* 描述 */
.describe {
  font-size: 14px;
  color: #999;
  font-weight: 400;
  font-family: "思源黑体";
  width: 1000px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(228, 228, 228);
}
/*教师姓名*/
.js-name {
  position: relative;
  padding: 32px 0px 32px 70px;
}
.js-name span {
  color: #333;
  font-size: 14px;
}
.js-name span b {
  text-decoration: none;
  color: red;
}
.js-name .el-input {
  width: 185px;
  height: 37px;
  font-size: 13px;
  color: rgb(153, 153, 153);
  margin-left: 20px;
}
.js-name p{
  font-size: 12px;
  color: rgb(255, 0, 0);
  height: 16px;
  position: absolute;
  bottom: 6px;
  left: 170px;
}
/*教师头像*/
.js-img {
  padding: 20px 0 20px 70px;
  display: flex;
  position: relative;
}
.js-img .el-upload {
  width: 73px;
  height: 73px;
  position: relative;
  margin-left: 20px;
  top:-15px;
}
.js-img .el-upload--picture-card i {
  font-size: 20px;
  font-weight: bolder;
  color: #8c939d;
  position: absolute;
  top: 15px;
  left: 25px;
}
.js-img span {
  color: #333;
  font-size: 14px;
}
.js-img span b {
  text-decoration: none;
  color: red;
}
.js-img .sctp {
  display: block;
  width: 48px;
  height: 16px;
  font-size: 12px;
  color: #999;
  position: absolute;
  bottom: 45px;
  left: 175px;
  font-weight: 400;
  z-index: 999;
  font-weight: 400;
  cursor: pointer;
}
.js-img p {
  font-size: 12px;
  color: #999;
  height: 16px;
  position: absolute;
  bottom: 6px;
  left: 170px;
}
/*教师简介*/
.js-jj {
  padding: 20px 0 20px 100px;
}
.js-jj span {
  color: #333;
  font-size: 14px;
}
.js-jj span b {
  text-decoration: none;
  color: red;
}
.js-jj .el-input {
  width: 487px;
  height: 37px;
  margin-left: 5px;
}
/*内容详情*/
.js-xq {
  margin: 20px 0 0 0;
  height: 420px;
}
.js-xq .title {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  text-align: left;
  margin-left: 80px;
  float: left;
}
.js-xq .edit {
  float: left;
  width: 805px;
  height: 420px;
  border: 1px solid rgba(228, 228, 228, 1);
  border-radius: 8px;
  margin-left: 10px;
  overflow: hidden;
}
.quill-editor {
  height: 354px;
 }
/* 上传时间 */
.js-time {
  padding: 20px 0 20px 80px;
  display: flex;
}
.js-time span {
  color: #333;
  font-size: 14px;
}
.js-time span b {
  text-decoration: none;
  color: red;
}
.js-time .block {
  margin-left: 20px;
}
/* 排序*/
.js-pxh{
  padding: 20px 0 20px 90px;
  display: flex;
}
.js-pxh span{
   color: #333;
  font-size: 14px;
}
.js-pxh p{
  font-size: 12px;
  color: #999;
}
.js-pxh .el-input{
  width: 185px;
  height: 37px;
  margin-left: 20px;
}
/* 轮播图按钮 */
.js-bottom-btn{
  position: relative;
  padding: 20px 0;
}
.js-bottom-btn-son{
  display: flex;
  position: absolute;
  left: 38%;
}
.js-bottom-btn .baocun{
  width: 96px;
  height: 36px;
  background-color: #9137f3;
  border-radius: 3px;
  box-shadow: none;
  position: relative;
  cursor: pointer;
    margin-right:18px;
}
.js-bottom-btn .baocun img{
  width: 16px;
  height:16px;
  position: absolute;
  left: 26px;
  top: 10px;
}
.js-bottom-btn .baocun span{
  font-size: 13px;
  color: #fff;
  position: absolute;
  right: 20px;
  top: 10px;
}
.js-bottom-btn .quxiao{
  width: 96px;
  height: 36px;
  background-color: rgba(153,153,153,0.2666667);
  border-radius: 3px;
  box-shadow: none;
  position: relative;
  margin-left:18px;
  cursor: pointer;
}
.js-bottom-btn .quxiao img{
  width: 16px;
  height:16px;
   position: absolute;
  left: 26px;
  top: 10px;
}
.js-bottom-btn .quxiao span{
  font-size: 13px;
  color: #666;
  position: absolute;
  right: 20px;
  top: 10px;
}
.js-bottom-btn .baocun:hover{
  opacity: .8;
}
.js-bottom-btn .quxiao:hover{
  opacity: .8;
}
</style>